<template>
	<view class="box maxW">
		<template v-if="name==''">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="recycling-enquiryinfo-content maxW">
				<view class="price-content-background"></view>
				<view class="price-content">
					<view class="product-name">
						{{name}} 预估价格
					</view>
					<view class="price-total-container">
						<text class="icon">
							￥
						</text>
						<text class="price-total">
							{{total_price}}
						</text>
					</view>
					<view class="tips">
						*回收市场价格波动，请尽快回收，估价以实际质检为准
					</view>
				</view>
				<view class="content-main">
					<view class="payment">
						<view class="p-left">
							收款方式
						</view>
						<view class="p-right">
							<text class="pr-txt">小米商城现金券</text>
							<view class="pr-tip">（不可提现
								<image src="../../static/images/wen.png" mode=""></image>
								）
							</view>
						</view>
					</view>
					<view class="no-default-address">
						<view class="content-item">
							<view class="tel-info">
								<view class="left add-addr">
									<image src="../../static/images/addres.png" mode=""></image>
									<view class="addr-addres-new">
										<view class="addr-title">
											添加新地址
										</view>
										<view class="addr-desc">
											添加地址后，可选择回收方式
										</view>
									</view>
								</view>
								<view class="right el-flex">
									<image src="../../static/images/right.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="content-item retrieve">
							<view class="transaction-list2">
								<block v-for="(item,index) in navList" :key="index">
									<view class=" li" :class="navIndex==index?'selected':''" @click="navIndex=index">
										{{item.name}}
									</view>
								</block>
							</view>
							<view class="process-main">
								<block v-for="(item,index) in navList[navIndex].list" :key="index">
									<view class="process-item">
										<image :src="`../../static/images/${item.image}.png`" mode=""></image>
										<view class="text">{{item.name}}</view>
									</view>
									<template v-if="index!==navList[navIndex].list.length-1">
										<view class="process-arrow">
											<image src="../../static/images/jian.png" mode=""></image>
										</view>
									</template>
								</block>
							</view>
						</view>
						<view class="submit-btn maxW">
							<view class="btn-s fb">
								添加地址
							</view>
						</view>
					</view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				name: '',
				total_price: '',
				navList: [{
						name: '上门回收',
						list: [{
								name: '线上下单',
								image: 'xianxia'
							},
							{
								name: '等待上门',
								image: 'dengdai'
							},
							{
								name: '当面质检',
								image: 'process3'
							},
							{
								name: '拿补贴',
								image: 'butie'
							},
						]
					},
					{
						name: '免费快递回收',
						list: [{
								name: '线上下单',
								image: 'xianxia'
							},
							{
								name: '快递回收',
								image: 'kd'
							},
							{
								name: '平台质检',
								image: 'pt'
							},
							{
								name: '确认价格',
								image: 'queren'
							},
							{
								name: '拿补贴',
								image: 'butie'
							},
						]
					},
					{
						name: '门店回收',
						list: [{
								name: '线上下单',
								image: 'xianxia'
							},
							{
								name: '前往门店',
								image: 'qw'
							},
							{
								name: '当面质检',
								image: 'process3'
							},
							{
								name: '拿补贴',
								image: 'butie'
							},
						]
					},
				]
			};
		},
		computed: {
			idList() {
				return this.$store.state.idList
			}
		},
		onBackPress(e) {
			if (e.from === 'backbutton') {
				uni.navigateTo({
					url: '/navPage/mfbs/mfbs'
				})
				return true;
			}
		},
		methods: {
			getPriceInquiry(product_id, provider, price_value_ids) {
				this.$request.get('/getPriceInquiry', {
					product_id: product_id,
					provider: provider,
					price_value_ids: price_value_ids
				}).then((res) => {
					this.getPriceQuery(res.data.data.key)
				}).catch(e => {
					console.log('错误了:', e)
					uni.navigateTo({
						url: '/subPage/emptyData/emptyData'
					})
				})
			},
			getPriceQuery(key) {
				this.$request.get('/getPriceQuery', {
					key: key,
					provider: this.provider,
				}).then((res) => {
					this.name = res.data.data.product.name
					this.total_price = res.data.data.total_price
				}).catch(e => {
					console.log('错误了:', e)
					uni.navigateTo({
						url: '/subPage/emptyData/emptyData'
					})
				})
			}
		},
		onLoad(e) {
			this.provider = e.provider
			this.getPriceInquiry(e.productId, e.provider, this.idList)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.recycling-enquiryinfo-content {
		overflow: scroll;
		box-sizing: border-box;
		background: #f6f6f6 !important;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.price-content-background {
			position: relative;
			left: 0;
			top: 0;
			width: 100%;
			height: 0.006666666666667rem;

			&:before {
				position: absolute;
				left: 0;
				top: 0;
				content: "";
				display: block;
				width: 100%;
				height: 2.44rem;
				background-image: linear-gradient(270deg, #ff5900, #ff9446);
			}
		}

		.price-content {
			position: relative;
			background: #fff;
			padding: 0.24rem;
			margin: 0.32rem 0.24rem 0;
			border-radius: 0.24rem 0.24rem;
			text-align: left;

			.product-name {
				padding-top: 0.16rem;
				font-size: .32rem;
				line-height: 1;
				font-weight: 500;
				font-family: MILanPro_MEDIUM--GB1-4;
				color: rgba(0, 0, 0, .9);
				margin-bottom: 0.173333333333333rem;
			}

			.price-total-container {
				color: #ff5900;

				.icon {
					font-size: .32rem;
					font-weight: 600;
					line-height: .746666666666667rem;
				}

				.price-total {
					font-size: .56rem;
					font-weight: 600;
					line-height: .746666666666667rem;
				}
			}

			.tips {
				padding-top: 0.026666666666667rem;
				font-size: .2rem;
				color: rgba(0, 0, 0, .3);
				line-height: 1;
			}
		}

		.content-main {
			background: #f6f6f6;
			border-radius: 0.24rem 0.24rem 0 0;
			padding: 0 0.24rem;
			position: relative;
			overflow: hidden;

			.payment {
				background: #fff;
				border-radius: 0.18rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0.29rem 0.24rem;
				margin-top: 0.24rem;

				.p-left {
					font-size: .32rem;
					font-weight: 400;
					color: #333;
				}

				.p-right {
					display: flex;
					font-size: .28rem;
					font-weight: 400;

					.pr-txt {
						color: #333;
					}

					.pr-tip {
						color: #666;
						display: flex;
						align-items: center;

						image {
							vertical-align: -0.038rem;
							display: inline-block;
							width: 0.25rem;
							height: 0.25rem;
							margin: 0 0.02rem;
						}
					}
				}
			}

			.no-default-address {
				.content-item {
					position: relative;
					box-sizing: border-box;
					padding-left: 0.2rem;
					background: #fff;
					text-align: left;
					margin-top: 0.24rem;
					border-radius: 0.18rem;

					.tel-info {
						color: #3c3c3c;
						padding: 0.24rem 0;
						justify-content: space-between;
						flex-direction: row;
						display: -webkit-box;
						display: -webkit-flex;
						display: flex;

						.add-addr {
							display: flex;
							align-items: center;

							image {
								width: 0.64rem;
								height: 0.64rem;
							}

							.addr-addres-new {
								margin-left: 0.18rem;

								.addr-title {
									font-size: .32rem;
									font-weight: 700;
								}

								.addr-desc {
									font-size: .24rem;
									margin-top: 0.06rem;
								}
							}
						}

						.left {}

						.right {
							flex-direction: row;
							padding-right: 0.2rem;

							image {
								vertical-align: middle;
								width: 0.48rem;
								height: 0.48rem;
								display: inline-block;
							}
						}
					}
				}

				.retrieve {
					padding: 0.24rem;

					.transaction-list2 {
						display: flex;

						.li {

							font-size: .28rem;
							color: #333;
							margin-right: 0.48rem;
							position: relative;
						}

						.selected {
							color: #000;
							font-weight: 700;

							&:after {
								content: "";
								display: block;
								width: 0.64rem;
								height: 0.2rem;
								background: linear-gradient(90deg, rgba(255, 170, 0, 0), #ff6900);
								border-radius: 0.1rem;
								margin-top: -0.13rem;
								margin-left: 25%;
							}
						}
					}

					.process-main {
						display: flex;
						justify-content: space-between;
						margin-top: 0.4rem;

						.process-item {
							image {
								width: 0.64rem;
								height: 0.64rem;
								margin: 0 auto;
								display: block;
							}

							.text {
								margin-top: 0.04rem;
								font-size: .22rem;
							}
						}

						.process-arrow {
							margin-top: 0.08rem;

							image {
								width: 0.46rem;
								height: 0.48rem;
							}
						}
					}
				}

				.submit-btn {
					position: fixed;
					left: 0;
					bottom: 0;
					right: 0;
					background: #f6f6f6;
					box-sizing: border-box;
					padding: 0.3rem 0.35rem;

					.btn-s {
						width: 6.5rem;
						margin: 0;
						background-color: #f56600;
						color: #fff;
						font-size: .32rem;
						height: 0.88rem;
						line-height: .96rem;
						text-align: center;
						border-radius: 0.5rem;
					}
				}
			}
		}
	}
</style>